<template>
  <main-layout>
    <div class="bodys"  @scroll="scrollEvt">
      <!-- <div  @click="top" class="top"><button>⇑</button></div> -->
      
      <div class="headers">
        <input
          v-on:keyup.13="search"
          type="text"
          v-model="val"
          placeholder="搜索书名、分类、ISBN"
        />
        <img
          @click="search"
          src="../../images/sousou.jpeg"
          alt=""
          class="photos"
        />
        <div @click='tomore'><img  src="../../images/type.png" alt="" />分类</div>
      </div>
     <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item><img src="https://img.alicdn.com/imgextra/i1/1164490191/O1CN01Irdmxr1DHWKz4mNeg_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></van-swipe-item>
        <van-swipe-item><img src="https://img.alicdn.com/imgextra/i1/103562228/O1CN01Ghfsm21SKT7dh8qlO_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></van-swipe-item>
        <van-swipe-item><img src="https://img.alicdn.com/imgextra/i2/45477055/O1CN01IEc3d521zExqdORX5_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></van-swipe-item>
        <van-swipe-item><img src="https://img.alicdn.com/imgextra/i1/106116139/O1CN01N5T4S91vDi2BgfTkv_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" alt=""></van-swipe-item>
      </van-swipe>

         <div class="container">
          <div class="booksList" v-for="item in list" :key="item.title">
          <img @click="moreEvt(item)" :src="item.src" alt="" />
          <div class="box-right">
            <div class="title">{{ item.title }}</div>
            <div class="price">￥{{ item.price }}</div>
            <button class="bth" @click="addCart(item)">加入购物车</button>
          </div>
        </div>
      </div>
    </div>
  </main-layout>
</template>
<script>
import MockService from "../../apis/Ajax";
import {Toast}from 'vant'
export default {
  data() {
    return {
      list: [],
      cartList: [],
      val: "",
      searchArr: [],
      pages:1,
      loading:true
    };
  },  
  async created(){
      let result=await MockService.getBooksList(this.pages,8)
      this. list=result.data.rows
  },


  methods: {
    async search() {
      let good = await MockService.searchBook(this.val);
      this.searchArr = good.data;
      sessionStorage.setItem("search", JSON.stringify(this.searchArr));
      sessionStorage.setItem("val", JSON.stringify(this.val));
      this.$router.push("/search");
    },
    tomore(){
        this.$router.push("/type")
    },
    moreEvt(item) {
      var obj2 = {
        author: item.author,
        src: item.src,
        title: item.title,
        price: item.price,
        press: item.press,
        name: item.name,
      };
      sessionStorage.setItem("more", JSON.stringify(obj2));
      this.$router.push("/more");
    },
    addCart(item) {
      var obj = {
        id: item.id,
        src: item.src,
        title: item.title,
        price: item.price,
        num: 1,
        oneValue: false,
      };
      let open = false;
      let cartM = JSON.parse(sessionStorage.getItem("cartlist")) || [];
      console.log(cartM);
      this.cartList = cartM;
      //  for(item in cartM){
      //    if(item.title==obj.title){
      //       open=true
      //       return
      //    }
      //  }
      let index = "";
      for (let i = 0; i < cartM.length; i++) {
        if (cartM[i].title == obj.title) {
          open = true;
          index = i;
        }
      }
      if (!open) {
        this.cartList.push(obj);
      } else {
        this.cartList[index].num++;
      }
      sessionStorage.setItem("cartlist", JSON.stringify(this.cartList));
       Toast.success('加入成功')
      // this.$router.push("/cart");
    },
    scrollEvt(e){
      // console.log(e);
       let isBot = e.target.scrollHeight < (e.target.offsetHeight + e.target.scrollTop + 20)
      if( isBot && this.loading ){
        this.loading = false
        this.pages++
        this.getMore()
      }
      // console.log(isBot);
    },
    async getMore(){
      let result=await MockService.getBooksList(this.pages,8)
      this.list=[...this.list,...result.data.rows]
      // console.log(this.list);
      setTimeout(() => {
                    this.loading = true
                },1500);
    }
  },
};
</script>
<style lang="less" scoped>
// .top{
//   position: fixed;
//   bottom: 100px;
//   right: 15px;
//   z-index: 10;
//   opacity: 0.5;
// }
.headers {
  width: 100%;
  height: 65px;
  display: flex;
  justify-content: space-around;
  position: relative;
  .photos {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 324px;
    top: 22px;
  }
  input {
    width: 320px;
    height: 35px;
    margin-left: 20px;
    margin-top: 20px;
  }
  div {
    display: block;
    flex-flow: column;
    width: 30px;
    font-size: 0.75rem;
    // margin-left: px;
    margin-top: 25px;
    img {
      width: 20px;
      height: 20px;
      margin-left: 2px;
    }
  }
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 120px;
    text-align: center;
    background-color: whitesmoke;
    height: 345px;
    width: 250px;
    > img{
      width: 80%;
      height: 80%;
      margin-top: 30px;
    }
  }
.container {
  width: 100%;
  // overflow-x: hidden;
  display: flex;
  // height: 100%;
  max-width: 100%;
  flex-wrap:wrap ;
  justify-content: space-around;
  .booksList {
    width: 48%;
    display: flex;
    flex-wrap:wrap ;
    margin-top: 20px;

    font-size: 0.9375rem;
    background-color: #fff;
    border-radius: 10px;

    img {
      height: 120px;
      border-radius: 15px;
      margin: 15px auto;
    }
    .box-right {
      width: 100%;
      height: 100px;
      overflow: hidden;
      background-color: #fff;
      border-radius: 15px;
      position: relative;
      margin-top: 20px;
      .title {
        margin-bottom: 25px;
        line-height: 20px;
        text-indent: 15px;
        margin-left: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .price {
        margin-left: 12px;
        margin-top: 35px;
        font-size: 17px;
        color: red;
      }
      .bth {
        font-size: 12px;
        width: 85px;
        height: 25px;
        background-color: red;
        color: #fff;
        border-radius: 10px;
        position: absolute;
        right: 12px;
        top: 55px;
        border: none;
      }
    }
  }

}
  .bodys {
    // width: 100%;
    height: 100%;
    overflow-x: hidden;
    display: flex;
    flex-wrap: wrap;
    // flex: 1;
    // top: 0;
    // left: 0;
    background-color: whitesmoke;
  }
</style>